import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native'
import React, { useEffect, useState } from 'react'
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
import { AlertDialog, Button } from 'native-base'
import Cell from '../Cell'

const FilterSheet = ({ data = {}, onChange = () => { } }) => {

  const [isOpen, setIsOpen] = useState(false)
  const [currentKey, setCurrentKey] = useState(Object.keys(data)[0])
  // 当前刷选条件对象
  const [query, setQuery] = useState({})
  
  useEffect(() => {
    setIsOpen(false)
    if(Object.keys(query).length > 0) {
      onChange(query)
    }
  }, [query])
  // console.log('currentKey', currentKey)
  const open = (key) => {
    setCurrentKey(key)
    setIsOpen(!isOpen)
  }
  const change = (index) => {
    // console.log('change', query)
    setQuery({
      ...query,
      [currentKey]: index
    })
  }
  const isActive = (key) => {
    return isOpen && key === currentKey
  }
  return (
    <View style={styles.container}>
      <View style={styles.head}>
        {
          Object.keys(data).map(key => {
            return (
              <TouchableWithoutFeedback onPress={() => open(key)} key={key}>
                <View style={styles.item}>
                  <Text style={[styles.name, isActive(key) && styles.activeColor]}>
                    {data[key][query[key] || 0].name}
                  </Text>
                  <SimpleLineIcons name={isActive(key) ? 'arrow-up' : 'arrow-down'}></SimpleLineIcons>
                </View>
              </TouchableWithoutFeedback>
            )
          })
        }
      </View>
      {
        isOpen &&
        <View style={styles.popup}>
          {
            data[currentKey].map((item, index) => {
              return (
                <Cell key={index} leftText={item.name} onPress={()=>change(index)} />
              )
            })
          }
        </View>
      }
      {/* <AlertDialog style={{ height: 200 }} isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <AlertDialog.Content>
          <AlertDialog.Body>
            是否删除该条数据？
          </AlertDialog.Body>
        </AlertDialog.Content>
      </AlertDialog> */}
    </View>
  )
}

export default FilterSheet

const h = 40
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    // paddingHorizontal: 5,
    // paddingVertical: 10
    position: 'relative',
    zIndex: 10,
    // flex: 1
  },
  head: {
    // paddingVertical: 10,
    // paddingHorizontal: 5,
    height: h,
    display: 'flex',
    flexDirection: 'row',
    // justifyContent: 'center',
  },
  item: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    marginHorizontal: 10
  },
  name: {
    marginRight: 3
  },
  activeColor: {
    color: 'orange'
  },
  popup: {
    // height: 200,
    backgroundColor: '#fff',
    position: 'absolute',
    left: 0,
    right: 0,
    top: h,
    // bottom: 0
  }
})